<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-divider content-position="center">订单信息</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务状态" prop="business_status">
              <el-select v-model="form.business_status" placeholder="业务状态" clearable style="width: 100%">
                <el-option label="NEW" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托日期" prop="entrust_date">
              <el-date-picker v-model="form.entrust_date" value-format="yyyy-MM-dd" type="date" placeholder="委托日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销售" prop="sale">
              <el-input v-model="form.sale" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客服" prop="customer_service">
              <el-input v-model="form.customer_service" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="委托单位" prop="entrust_company">
              <el-select v-model="form.entrust_company" filterable placeholder="委托单位" clearable style="width: 100%" @change="getFollow(1)">
                <el-option
                  v-for="(dict,index) in entrust_company_options"
                  :key="index"
                  :label="dict.account_name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托跟进人" prop="entrust_company">
              <el-select v-model="form.entrust_company_follow" filterable placeholder="委托跟进人" clearable style="width: 100%" @change="getMation(1)">
                <el-option
                  v-for="(dict,index) in entrust_company_follow_options"
                  :key="index"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跟进人电话" prop="sale">
              <el-input v-model="form.entrust_follow_phone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跟进人邮箱" prop="sale">
              <el-input v-model="form.entrust_follow_email" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="经营单位" prop="management_company">
              <el-select v-model="form.management_company" filterable placeholder="委托单位" clearable style="width: 100%" @change="getMation(2)">
                <el-option
                  v-for="(dict,index) in management_company_options"
                  :key="index"
                  :label="dict.account_name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经营联系人" prop="sale">
              <el-input v-model="form.management_company_person" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="sale">
              <el-input v-model="form.management_company_phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="结算单位" prop="settlement_company">
              <el-select v-model="form.settlement_company" filterable placeholder="结算单位" clearable style="width: 100%" @change="getFollow(3)">
                <el-option
                  v-for="(dict,index) in settlement_company_options"
                  :key="index"
                  :label="dict.account_name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算跟进人" prop="entrust_company">
              <el-select v-model="form.settlement_company_follow" filterable placeholder="结算跟进人" clearable style="width: 100%" @change="getMation(3)">
                <el-option
                  v-for="(dict,index) in settlement_company_follow_options"
                  :key="index"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跟进人电话" prop="sale">
              <el-input v-model="form.settlement_follow_phone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跟进人邮箱" prop="sale">
              <el-input v-model="form.settlement_follow_email" />
            </el-form-item>
          </el-col>
<!--          <el-col :span="6">-->
<!--            <el-form-item label="结算联系人" prop="sale">-->
<!--              <el-input v-model="form.settlement_company_person" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="联系电话" prop="sale">-->
<!--              <el-input v-model="form.settlement_company_phone" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <el-divider content-position="center">基础信息</el-divider>
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="basic">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="发货人" prop="consignor">
                      <el-input v-model="form.consignor" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="收货人" prop="settlement_company">
                      <el-select v-model="form.consignee" filterable placeholder="收货人" clearable style="width: 100%" >
                        <el-option
                          v-for="(dict,index) in consignee_options"
                          :key="index"
                          :label="dict.account_name"
                          :value="dict.id"
                        />
                      </el-select>
                    </el-form-item>
<!--                    <el-form-item label="收货人" prop="consignee">-->
<!--                      <el-input v-model="form.consignee" />-->
<!--                    </el-form-item>-->
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="件数" prop="number">
                      <el-input v-model="form.number" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="体积" prop="volume">
                      <el-input v-model="form.volume" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="包装" prop="packing">
                      <el-input v-model="form.packing" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="毛重" prop="gross_weight">
                      <el-input v-model="form.gross_weight" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="提单要求" prop="lading_bill_ask">
                      <el-input v-model="form.lading_bill_ask" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="提单信息" prop="lading_bill_info">
                      <el-input v-model="form.lading_bill_info" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                      <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" autocomplete="off" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="报关单证" name="document">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="供应商" prop="provider">
                      <el-select v-model="document.provider" filterable placeholder="供应商" clearable style="width: 100%" >
                        <el-option
                          v-for="(dict,index) in provider_options"
                          :key="index"
                          :label="dict.account_name"
                          :value="dict.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="报关单号" prop="customs_number">
                      <el-input v-model="document.customs_number" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="上传报关单">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    :headers="importHeaders"
                    :action="url.import"
                    :on-success="handleSuccess"
                    :on-change="handleImport"
                    :file-list="fileList"
                    :multiple="false"
                    :limit="1"
                    accept=".csv, application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                  >
                    <el-button size="mini" type="success">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传csv/xlsx/xls/pdf文件</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="上传报关资料">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    :headers="importHeaders"
                    :action="url.import"
                    :on-success="handleSuccess2"
                    :on-change="handleImport"
                    :file-list="fileList2"
                    :multiple="false"
                    :limit="1"
                    accept=".csv, application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                  >
                    <el-button size="mini" type="success">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传csv/xlsx/xls/pdf文件</div>
                  </el-upload>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="运输明细" name="transport">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="handleAdd2"
                    >新增</el-button>
                  </el-col>
                </el-row>
                <el-table :data="TtableData" style="width: 100% " stripe border>
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="起运时间">
                          <span>{{ props.row.departure_date }}</span>
                        </el-form-item>
                        <el-form-item label="车型要求">
                          <span>{{ props.row.box_type_volume }}</span>
                        </el-form-item>
                        <el-form-item label="关区代码">
                          <span>{{ props.row.customs_district }}</span>
                        </el-form-item>
                        <el-form-item label="经营单位">
                          <span>{{ props.row.business_unit }}</span>
                        </el-form-item>
                        <el-form-item label="报关件数">
                          <span>{{ props.row.declare_piece }}</span>
                        </el-form-item>
                        <el-form-item label="报关毛重">
                          <span>{{ props.row.declare_gross_weight }}</span>
                        </el-form-item>
                        <el-form-item label="金额描述">
                          <span>{{ props.row.money_describe }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column prop="departure_date" label="起运时间">
                    <template slot-scope="scope">
                      {{ scope.row.departure_date }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="box_type_volume" label="箱型箱量">
                    <template slot-scope="scope">
                      {{ scope.row.box_type_volume }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="transport_company" label="运输公司">
                    <template slot-scope="scope">
                      {{ scope.row.transport_company }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="wagon_number" label="车号">
                    <template slot-scope="scope">
                      {{ scope.row.wagon_number }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="waybill_status" label="运单状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.waybill_status === '1'">NEW</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status_date" label="状态时间">
                    <template slot-scope="scope">
                      {{ scope.row.status_date }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit2(scope.row)"
                      >修改
                      </el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDel2(scope.row)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="费用明细" name="cost">
                <el-table :data="tableData3" style="width: 100% " stripe border>
                  <el-table-column prop="expense_code" label="费用代码">
                    <template slot-scope="scope">
                      {{ scope.row.expense_code }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="expense_name" label="费用名称">
                    <template slot-scope="scope">
                      {{ scope.row.expense_name }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="settlement_code" label="结算代码">
                    <template slot-scope="scope">
                      {{ scope.row.settlement_code }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="settlement_name" label="结算名称">
                    <template slot-scope="scope">
                      {{ scope.row.settlement_name }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit_price" label="单价">
                    <template slot-scope="scope">
                      {{ scope.row.unit_price }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="quantity" label="数量">
                    <template slot-scope="scope">
                      {{ scope.row.quantity }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="currency" label="币种">
                    <template slot-scope="scope">
                      {{ scope.row.currency }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="money" label="金额">
                    <template slot-scope="scope">
                      {{ scope.row.money }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="invoicing_date" label="开票日期">
                    <template slot-scope="scope">
                      {{ scope.row.invoicing_date }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenses_type" label="费用类型">
                    <template slot-scope="scope">
                      <span v-if="scope.row.expenses_type == '15'">应收</span>
                      <span v-else-if="scope.row.expenses_type == '16'">应付</span>
                      <span v-else>未知</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 运输明细 -->
    <Transport :open.sync="Topen" :title="Ttitle" :form="Tform" :table-data="TtableData" />
  </div>
</template>
<script>
import { tradeCreate, tradeEdit } from '@/api/business'
import { getProvider, getOther, getInsideType,getFollow } from '@/api/basics'
import Transport from '../information/Transport'
import { mapGetters } from 'vuex'
export default {
  name: 'AddEdit',
  components: {
    Transport
  },
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  data() {
    return {
      rules: {

      },
      // 其他信息
      other: {},
      otherList: [],
      // 报关单证
      document: {},
      // 委托单位
      options: {},
      // 经营单位
      options2: {},
      // 上传头部
      importHeaders: { authorization: 'Bearer ' + this.token },
      // 上传地址
      url: {
        import: process.env.VUE_APP_BASE_API + '/upload/file'
      },
      // 上传列表
      fileList: [],
      fileList2: [],
      // 回调路径
      file_path: '',
      file_path_two: '',
      // Tab切换
      activeName: 'basic',
      // 运输
      TtableData: [],
      tableData3:[],
      Topen: false,
      Ttitle: '',
      Tform: {},
      // 内部类型
      InsideTypeList: [],
      //
      entrust_company_options:[],
      entrust_company_follow_options:[],
      management_company_options:[],
      settlement_company_options:[],
      settlement_company_follow_options:[],
      consignee_options:[],//收货人库
      provider_options:[]
    }
  },
  watch: {
    'form': function(newValue, oldValue) {
      if (JSON.stringify(this.form) !== '{}' && this.title === '编辑') {
        if(this.form.entrust_company){
          this.getFollow(1)
        }
        if(this.form.management_company){
          this.getMation(2)
        }
        if(this.form.settlement_company){
          this.getFollow(3)
        }
        // 报关单
        this.document = this.form.declaration?this.form.declaration:{}
        this.fileList = []
        this.fileList2 = []
        if(this.form.declaration.file_path){
          this.fileList = [{
            'name': this.form.declaration.file_path.split('/').pop(),
            'url': this.form.declaration.file_path
          }]
        }
        if(this.form.declaration.file_path_two){
          this.fileList2 = [{
            'name': this.form.declaration.file_path_two.split('/').pop(),
            'url': this.form.declaration.file_path_two
          }]
        }
        // 运输明细
        this.TtableData = this.form.transport
        this.tableData3 = this.form.expenses
        delete this.form.transport
        delete this.form.declaration
        // delete this.form.otherinfo
      } else if (JSON.stringify(this.form) === '{}' || this.title === '添加') {
        this.TtableData = []
        this.document = {}
        this.other = {}
        this.fileList = []
        this.fileList2 = []
      }
    }
  },
  created() {
    this.providerList()
  },
  methods: {
    getMation(type){
      if(type==1){
        this.entrust_company_follow_options.forEach((item)=>{
          if(this.form.entrust_company_follow == item.id){
            this.form.entrust_follow_phone = item.phone
            this.form.entrust_follow_email = item.email
          }
        })
      }else if(type==2){
        this.management_company_options.forEach((item)=>{
          if(this.form.management_company == item.id){
            this.form.management_company_person = item.relation_name
            this.form.management_company_phone = item.relation_phone
          }
        })
      }else if(type==3){
        this.settlement_company_follow_options.forEach((item)=>{
          if(this.form.settlement_company_follow == item.id){
            this.form.settlement_follow_phone = item.phone
            this.form.settlement_follow_email = item.email
            // this.form.settlement_company_person = item.relation_name
            // this.form.settlement_company_phone = item.relation_phone
          }
        })
      }
    },
    /** 新增运输 */
    handleAdd2() {
      this.Tform = {}
      this.Topen = true
      this.Ttitle = '添加'
    },
    /** 编辑运输 */
    handleEdit2(row) {
      this.Tform = row
      this.Topen = true
      this.Ttitle = '编辑'
    },
    /** 删除运输 */
    handleDel2(row) {
      const that = this
      that.$confirm('是否删除该数据？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.tableData2.some((value, index) => {
          if (value.key === row.key) {
            that.tableData2.splice(index, 1)
            return true
          }
        })
      }).catch(() => {
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      const info = {}
      // 基本信息
      info.basic = that.form
      // 其他信息
      //info.otherinfo = that.other
      // 报关单证
      info.declaration = that.document
      // 运输明细
      info.transport = that.TtableData
      // console.log(info)
      tradeCreate(info).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      const info = {}
      // 基本信息
      info.basic = that.form
      // 其他信息
      // info.otherinfo = that.other
      // 报关单证
      info.declaration = that.document
      // 运输明细
      info.transport = that.TtableData
      // console.log(info)
      tradeEdit(info).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    },
    // 打开导入弹窗
    handleImport() {
      this.importHeaders.authorization = 'Bearer ' + this.token
      this.url.import = process.env.VUE_APP_BASE_API + '/upload/file'
    },
    // 报关单成功提示
    handleSuccess(response, file, fileList) {
      if (response.code === 10000) {
        this.document.file_path = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    // 报关单资料成功提示
    handleSuccess2(response, file, fileList) {
      if (response.code === 10000) {
        this.document.file_path_two = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    businessChange(value) {
      this.other = {}
      getOther({ type: value }).then(response => {
        if (response.code === 10000) {
          this.otherList = response.data
        }
      })
      this.InsideTypeList = []
      getInsideType({ type: value }).then(response => {
        if (response.code === 10000) {
          this.InsideTypeList = response.data
        }
      })
    },
    providerList() {
      getProvider({ role: '10' }).then(response => {
        if (response.code === 10000) {
          this.entrust_company_options = response.data
        }
      })
      getProvider({ role: '11' }).then(response => {
        if (response.code === 10000) {
          this.management_company_options = response.data
        }
      })
      getProvider({ role: '15,16',plural:true }).then(response => {
        if (response.code === 10000) {
          this.settlement_company_options = response.data
        }
      })
      getProvider({}).then(response => {
        if (response.code === 10000) {
          this.consignee_options = response.data
          this.provider_options = response.data
        }
      })
    },
    getFollow(type) {
      if(type == 1) {
        if (this.form.entrust_company) {
          getFollow({pid: this.form.entrust_company}).then(response => {
            if (response.code === 10000) {
              this.entrust_company_follow_options = response.data
              if(this.form.entrust_company_follow){
                this.getMation(1)
              }
            }
          })
        }
      }else if(type == 3){
        if(this.form.settlement_company){
          getFollow({pid:this.form.settlement_company}).then(response => {
            if (response.code === 10000) {
              this.settlement_company_follow_options = response.data
              if(this.form.settlement_company_follow){
                this.getMation(3)
              }
            }
          })
        }
      }
    }
  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 40%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

